<template>
  <div v-if="tushulist">
    <div class="recombox">
      <div class="sy">推荐</div>
      <span
        class="iconfont icon-sousuo"
        @click="$router.push('/search')"
      ></span>
      <span class="iconfont icon-wode" @click="$router.push('/login')"></span>

      <div class="phb">
        <div class="phb-text">
          <span>排行榜</span>
          <span class="wz" @click="$router.push('/complete')">完整榜单<span class="iconfont icon-youjiantou"></span></span>
        </div>

        <div class="vantabs">
          <van-tabs
            v-model="active"
            title-inactive-color="#9a9a9a"
            title-active-color="black"
          >
            <van-tab title="男生榜">
              <div
                class="box1"
                v-for="(item, index) in boylist2"
                :key="index"
                @click="$router.push({path:'/bookxq',query:{id:item.id,cover:item.cover}})"
              >
                <div
                  class="img1"
                  :style="'background-image: url(' + item.cover + ')'"
                  v-lazy:background-image="item.cover"
                ></div>
                <p class="boxname1">{{ item.title }}</p>
                <p class="boxhot1">{{ item.clickCount | playCountData }}热度</p>
                <p class="boxtext1">{{ item.content }}</p>
                <p class="boxcat1">{{ item.category }}</p>
              </div>
            </van-tab>
            <van-tab title="女生榜">
              <div
                class="box1"
                v-for="(item, index) in grillist2"
                :key="index"
                @click="$router.push({path:'/bookxq',query:{id:item.id,cover:item.cover}})"
              >
                <div
                  class="img1"
                  :style="'background-image: url(' + item.cover + ')'"
                  v-lazy:background-image="item.cover"
                ></div>
                <p class="boxname1">{{ item.title }}</p>
                <p class="boxhot1">{{ item.clickCount | playCountData }}热度</p>
                <p class="boxtext1">{{ item.content }}</p>
                <p class="boxcat1">{{ item.category }}</p>
              </div>
            </van-tab>
            <van-tab title="图书榜">
              <div
                class="box1"
                v-for="(item, index) in tushulist2"
                :key="index"
                @click="$router.push({path:'/bookxq',query:{id:item.id,cover:item.cover}})"
              >
                <div
                  class="img1"
                  :style="'background-image: url(' + item.cover + ')'"
                  v-lazy:background-image="item.cover"
                ></div>
                <p class="boxname1">{{ item.title }}</p>
                <p class="boxhot1">{{ item.clickCount | playCountData }}热度</p>
                <p class="boxtext1">{{ item.content }}</p>
                <p class="boxcat1">{{ item.category }}</p>
              </div>
            </van-tab>
          </van-tabs>
        </div>
      </div>

      <div class="goodbook">
        <div class="phb-text">
          <span>{{ weeklist.name }}</span>
          <!-- <span>更多<span class="iconfont icon-youjiantou"></span></span> -->
        </div>
        <div class="goods">
          <div
            class="goodbox"
            v-for="(item, index) in weeklist.list"
            :key="index"
            @click="$router.push({path:'/bookxq',query:{id:item.id,cover:item.cover}})"
          >
            <!--v-for="(item,index) in weeklist" :key="index" :style="'background-image: url(' + item.cover + ')'"-->
            <div
              class="goodsimg"
              :style="'background-image: url(' + item.cover + ')'"
              v-lazy:background-image="item.cover"
            ></div>
            <p class="bookname1">{{ item.title }}</p>
            <p class="writer1">{{ item.author }}</p>
          </div>
        </div>
      </div>

      <div class="selected">
        <div class="phb-text">
          <span class="endlistname">{{ endlist.name }}</span>
          <!-- <span>更多<span class="iconfont icon-youjiantou"></span></span> -->
        </div>
        <div
          class="selectedbox"
          v-for="(item, index) in endlist.list"
          :key="index"
          @click="$router.push({path:'/bookxq',query:{id:item.id,cover:item.cover}})">
          <div
            class="selectedimg"
            :style="'background-image: url(' + item.cover + ')'"
            v-lazy:background-image="item.cover"
          ></div>
          <div>
            <p class="book2">{{ item.title }}</p>
            <p class="writer2">{{ item.author }}</p>
            <p class="synopsis">{{ item.content }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部组件 -->
    <buttom-nav></buttom-nav>
  </div>
</template>

<script>
import buttomNav from "../components/base/buttomNav.vue";
import {
  storeShow,
  storeMerged,
  storeRanklist,
  storeGril,
  storeTushu,
} from "../api/res";
export default {
  data() {
    return {
      active: 0,
      weeklist: [],
      endlist: [],
      boylist: [],
      boylist2: [], //男生排行榜三本书
      girllist: [],
      grillist2: [], //女生排行榜三本书
      tushulist: "",
      tushulist2: [], //图书排行榜三本书
    };
  },
  created() {
    storeShow().then((data) => {
      console.log(data.data);
      this.weeklist = data.data.list[2];
      this.endlist = data.data.list[7];
    });
    //排行榜分类
    storeRanklist().then((data) => {
      console.log(data);
    });
    //男生排行榜
    storeMerged().then((data) => {
      console.log(data.list);
      this.boylist = data.list;
      for (let i = 0; i < this.boylist.length; i++) {
        if (i < 4) {
          this.boylist2.push(this.boylist[i]);
        }
      }
      console.log(this.boylist2);
    });
    //女生排行榜
    storeGril().then((data) => {
      // console.log(data);
      this.girllist = data.list;
      for (let i = 0; i < this.girllist.length; i++) {
        if (i < 4) {
          this.grillist2.push(this.girllist[i]);
        }
      }
      // console.log(this.grillist2);
    });
    //图书榜
    storeTushu().then((data) => {
      console.log(data);
      this.tushulist = data.list;
      for (let i = 0; i < this.tushulist.length; i++) {
        if (i < 4) {
          this.tushulist2.push(this.tushulist[i]);
        }
      }
      console.log(this.tushulist2);
    });
  },
  components: {
    buttomNav,
  },
  filters: {
    playCountData(value) {
      let w = value > 10000 ? value / 10000 : value; // 万计算
      let y = w > 10000 ? parseInt(value / 10000) + "亿" : parseInt(w) + "万"; //亿计算
      return y;
    },
  },
};
</script>

<style lang="less">
div {
  margin: 0px;
  .recombox {
    background-color: #f3f3f3;
    position: relative;
    padding-bottom: 60px;
    box-sizing: border-box;
    .sy {
      font-size: 30px;
      font-weight: bold;
      // float: left;
      // margin-top: 10px;
      margin-left: 15px;
      padding-top: 5px;
    }
    .icon-sousuo {
      font-size: 28px;
      margin-left: 325px;
      margin-top: -30px;
      display: block;
    }
    .icon-wode{
      font-size: 25px;
      margin-left: 290px;
      margin-top: -28px;
      display: block;
    }
    .phb {
      // width: 100%;
      // height: 500px;
      border: 1px solid white;
      box-shadow: 0px 2px 5px 0px #888888;
      background-color: white;
      border-radius: 10px;
      // position: relative;
      // top: 60px;
      margin: 10px 10px;
      .phb-text {
        // position: absolute;
        background-color: white;
        width: 100%;
        height: 50px;
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        span {
          font-size: 18px;
          font-weight: bold;
          margin-left: 10px;
        }
        span:last-child {
          font-size: 15px;
          font-weight: normal;
          line-height: 30px;
          margin-right: 5px;
          .icon-youjiantou {
            margin-left: 0px;
          }
        }
      }
      div {
        background-color: white;
      }
      .box1 {
        background-color: white;
        //   border: 1px solid black;
        position: relative;
        margin: 10px 0px;
        .img1 {
          width: 70px;
          height: 85px;
          // border: 1px solid black;
          margin-left: 10px;
          background-size: cover;
        }
        .boxname1 {
          width: 180px;
          position: absolute;
          margin-left: 90px;
          margin-top: -80px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .boxhot1 {
          position: absolute;
          margin-left: 90px;
          margin-top: -55px;
          font-size: 13px;
          color: #707070;
        }
        .boxtext1 {
          position: absolute;
          width: 250px;
          margin-left: 90px;
          margin-top: -37px;
          font-size: 13px;
          color: #707070;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .boxcat1 {
          position: absolute;
          width: 50px;
          background-color: gainsboro;
          text-align: center;
          border-radius: 50px;
          margin-left: 90px;
          margin-top: -18px;
          font-size: 13px;
          color: #707070;
        }
      }
    }
    .goodbook {
      width: 95%;
      height: 350px;
      // border: 1px solid black;
      box-shadow: 0px 2px 5px 0px #888888;
      background-color: white;
      border-radius: 10px;
      position: relative;
      margin: 15px 10px 15px 10px;
      .phb-text {
        position: absolute;
        background-color: white;
        width: 100%;
        height: 50px;
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        span {
          font-size: 18px;
          font-weight: bold;
          margin-left: 10px;
        }
        // span:last-child {
        //   font-size: 15px;
        //   font-weight: normal;
        //   line-height: 30px;
        //   margin-right: 5px;
        //   .icon-youjiantou {
        //     margin-left: 0px;
        //   }
        // }
      }
      .goods {
        width: 100%;
        position: absolute;
        // border: 1px solid black;
        margin-top: 45px;
        background-color: white;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .goodbox {
          width: 80px;
          height: 150px;
          background-color: white;
          margin: 0px 4px;
          .goodsimg {
            width: 80px;
            height: 100px;
            border-radius: 5px;
            background-size: cover;
          }
          .bookname1 {
            width: 80px;
            font-weight: bold;
            margin-top: 3px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .writer1 {
            font-size: 13px;
            margin-top: 5px;
            color: #707070;
          }
        }
      }
    }
    .selected {
      width: 95%;
      background-color: white;
      border-radius: 10px;
      box-shadow: 0px 2px 5px 0px #888888;
      margin: 0px 10px;
      .phb-text {
        background-color: white;
        width: 100%;
        height: 50px;
        border-radius: 10px;
        line-height: 50px;
        display: flex;
        justify-content: space-between;
        span {
          font-size: 18px;
          font-weight: bold;
          margin-left: 10px;
        }
        // span:last-child {
        //   font-size: 15px;
        //   font-weight: normal;
        //   margin-right: 5px;
        //   line-height: 50px;
        //   .icon-youjiantou {
        //     margin-left: 0px;
        //   }
        // }
      }
      .selectedbox {
        width: 100%;
        background-color: white;
        // margin-bottom: 0px;
        display: flex;
        border-radius: 10px;
        padding-bottom: 7px;
        .selectedimg {
          width: 80px;
          height: 100px;
          margin-left: 10px;
          background-size: cover;
        }
        .book2 {
          margin-left: 10px;
          font-weight: bold;
          margin-top: 10px;
        }
        .writer2 {
          margin-left: 10px;
          margin-top: 5px;
          font-size: 13px;
          color: #707070;
        }
        .synopsis {
          margin-left: 10px;
          margin-top: 5px;
          width: 240px;
          color: #707070;
          font-size: 13px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
  }
}
</style>